import type { ProFormInstance } from '@ant-design/pro-components';
import {
  PageContainer,
  ProCard,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import {message} from 'antd';
import React, {useRef, useState} from 'react';
import {Editor} from "@bytemd/react";
import MonacoEditor from "react-monaco-editor";
import gfm from "@bytemd/plugin-gfm";
import {createQuestion} from "@/services/ant-design-pro/questionController";
import {history} from "@umijs/max";

import type { SelectProps } from 'antd';


const options: SelectProps['options'] = [
  { value: 'gold' },
  { value: 'lime' },
  { value: 'green' },
  { value: 'cyan' },
];

const plugins = [
  gfm(),
  // Add more plugins here
]

const monacoOptions = {
  selectOnLineNumbers: true,
  automaticLayout: true,
};

export default () =>{

  const [content,setContent] = useState<string>("")
  const [answer,setAnswer] = useState<string>("")
  const [sampleCode,setSampleCode] = useState<string>("")

  /**
   * 示例代码编辑器
   */
  const editorDidMount = (editor, monaco) => {
    editor.focus();
  }
  const formRef = useRef<ProFormInstance>();

  const onCreateQuestion = async (values:API.CreateQuestionRequest) => {

    const data = {
      ...values,
      content,
      answer,
      sampleCode,
    }
    const res = await createQuestion(data)
    if (res?.code === 200) {
      message.success("创建成功")
      history.push({
        pathname: "/oj/manage"
      })
      return;
    }
    message.error(res?.message)

  }

  return (

    <PageContainer>

      <ProCard>
        <StepsForm<API.CreateQuestionRequest>
          stepsProps={{
            direction: 'vertical',
          }}
          formRef={formRef}
          onFinish={(values) => onCreateQuestion(values)}
          formProps={{
            validateMessages: {
              required: '此项为必填项',
            },
          }}
        >
          <StepsForm.StepForm
            name="base"
            title="基本内容"
          >
            <ProForm.Group>
              <ProFormText
                name="title"
                width="md"
                label="标题"
                tooltip="最长为 24 位，用于标定的唯一 id"
                placeholder="请输入名称"
                rules={[{ required: true }]}
              />
              <ProFormSelect
                mode="multiple"
                options={options}
                name="tags"
                width="md"
                label="题目标签"
                tooltip="最长为 24 位，用于标定的唯一 id"
                placeholder="请选择标签"
                rules={[{ required: true }]}
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormSelect
                name="level"
                width="md"
                label="题目难度"
                tooltip="最长为 24 位，用于标定的唯一 id"
                placeholder="请输入名称"
                valueEnum={{
                  0: '简单',
                  1: '中等',
                  2: '困难',
                }}
                rules={[{ required: true }]}
              />
            </ProForm.Group>
            <ProForm.Group>
              <ProFormTextArea
                name="judgeConfig"
                width="md"
                label="判题配置"
                tooltip="最长为 24 位，用于标定的唯一 id"
                placeholder="请输入名称"
                rules={[{ required: true }]}
              />
              <ProFormTextArea
                name="judgeCase"
                width="md"
                label="判题用例"
                tooltip="最长为 24 位，用于标定的唯一 id"
                placeholder="请输入名称"
                rules={[{ required: true }]}
              />
            </ProForm.Group>

          </StepsForm.StepForm>

          <StepsForm.StepForm name="content" title="题目内容">

            <Editor
              value={content}
              mode='split'
              plugins={plugins}
              onChange={(value) => {
                setContent(value)
              }}
            />

          </StepsForm.StepForm>

          <StepsForm.StepForm name="answer" title="题目答案">

            <Editor
              value={answer}
              plugins={plugins}
              mode='split'
              onChange={(value) => {
                setAnswer(value)
              }}
             />

          </StepsForm.StepForm>
          <StepsForm.StepForm name="sampleCode" title="示例代码">
            <MonacoEditor
              height="270"
              language="java"
              // theme={theme}
              theme="vs-dark"
              value={sampleCode}
              options={monacoOptions}
              onChange={(value) =>
                setSampleCode(value)
              }
              editorDidMount={editorDidMount}
            />
          </StepsForm.StepForm>
        </StepsForm>
      </ProCard>

    </PageContainer>

  );
};
